<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="运输任务编号:" style="width: 300px">
        <el-input
          v-model="form.transportTaskId"
          placeholder="审批人"
        ></el-input>
      </el-form-item>
      <el-form-item label="起始地机构:" style="width: 300px">
        <el-cascader
          v-model="form.startAgencyId"
          :options="options"
          :props="props"
          @change="handleChange"
          :filterable="true"
          placeholder="起始地"
          emitPath="false"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="目的地机构:" style="width: 300px">
        <el-cascader
          v-model="form.endAgencyId"
          :options="options"
          :props="props"
          @change="handleChange"
          :filterable="true"
          placeholder="目的地"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="回车时间:">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width: 300px"
          size="mini"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="车辆是否可用:">
        <el-select v-model="form.isAvailable" placeholder="活动区域">
          <el-option label="全部" value=""></el-option>
          <el-option label="可用" :value="true"></el-option>
          <el-option label="不可用" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="danger" @click="white">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%; font-size: 12px"
      align="center"
    >
      <el-table-column prop="id" label="运输任务编号"> </el-table-column>
      <el-table-column prop="startAgencyName" label="起始地机构">
      </el-table-column>
      <el-table-column prop="endAgencyName" label="目的地机构">
      </el-table-column>
      <el-table-column
        prop="transportOrderNumber"
        label="运单数量"
        width="80px"
      >
      </el-table-column>
      <el-table-column prop="outStorageTime" label="出车时间">
      </el-table-column>
      <el-table-column prop="intoStorageTime" label="回车时间">
      </el-table-column>
      <el-table-column prop="licensePlate" label="车牌号码"> </el-table-column>
      <el-table-column
        prop="isAvailable"
        label="车辆是否可用"
        :formatter="formatter"
        width="110px"
      >
      </el-table-column>
      <el-table-column label="操作" width="60px">
        <template #default="{ row }">
          <el-link type="primary" @click="check(row.id)">查看</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getzhuyeApi, gettreeApi, getsousuoApi } from "@/api/register";
export default {
  name: "car-register",
  data() {
    return {
      total: 0,
      form: {
        transportTaskId: "",
        startAgencyId: 0,
        endAgencyId: 0,
        intoStorageStartTime: "",
        intoStorageEndTime: "",
      },
      time: [],
      options: [],
      props: {
        expandTrigger: "hover",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      tableData: [{}],
      page: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.refiserer();
  },
  methods: {
    async refiserer() {
      const res = await getzhuyeApi(this.page);
      console.log(res);
      this.tableData = res.data.items;
      this.total = +res.data.counts;
      const tree = await gettreeApi();
      // console.log(JSON.parse(tree.data));
      this.options = JSON.parse(tree.data);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.refiserer();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.refiserer();
    },
    handleChange() {},
    async search() {
      // this.isAvailable =""
      this.form.intoStorageStartTime = this.time[0];
      this.form.intoStorageEndTime = this.time[1];
      this.form.startAgencyId =
        this.form.startAgencyId[this.form.startAgencyId.length - 1];
      this.form.endAgencyId =
        this.form.endAgencyId[this.form.endAgencyId.length - 1];
      const res = await getsousuoApi({
        ...this.page,
        ...this.form,
      });
      console.log(res);
      this.tableData = res.data.items;
    },
    white() {
      this.tableData = "";
      this.refiserer();
    },
    formatter(a,b,c) {
      if (c) {
        return "可用";
      } else {
        return "不可用";
      }
    },
    check(id) {
      this.$router.push(`/transit/car-register-info/${id}`)

    }
  },
};
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline.el-form--inline {
  height: 168px;
  width: 100%;
  background-color: #fff;
  padding: 20px 20px 20px 30px;
}
</style>
